<template>
	<view class="style-template-container">
		<!-- 筛选按钮区域 -->
		<view class="filter-section">
			<view 
				class="filter-btn"
				:class="{ active: activeFilter === filter.key }"
				v-for="filter in filters"
				:key="filter.key"
				@click="switchFilter(filter.key)"
			>
				<text class="filter-text">{{ filter.name }}</text>
				<text class="filter-arrow" v-if="filter.hasDropdown">▼</text>
			</view>
		</view>

		<!-- 使用图片模板网格组件 -->
		<ImageTemplateGrid
			:templates="templateGroups"
			:activeFilter="activeFilter"
			:networkType="networkType"
			:isWifiConnected="isWifiConnected"
			@template-selected="handleTemplateSelected"
			@filter-changed="handleFilterChanged"
			ref="templateGrid"
		/>
		
	</view>
</template>

<script>
// 导入图片模板网格组件
import ImageTemplateGrid from '@/components/ai-trip/ImageTemplateGrid.vue';

export default {
	components: {
		ImageTemplateGrid
	},
	data() {
		return {
			activeFilter: 'hot',
			filters: [
				{ key: 'hot', name: '最热', hasDropdown: true },
				{ key: 'travel', name: '旅拍', hasDropdown: true },
				{ key: 'gender', name: '性别', hasDropdown: true },
				{ key: 'people', name: '人数', hasDropdown: true }
			],
			// 网络状态
			networkType: 'unknown',
			isWifiConnected: false,
			templateGroups: [
			{
					id: 1,
					title: '篮球宝贝',
					author: '驴小拍',
					image: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
					status: 'available',
					points: 10,
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.zhzfpn.cn/PicGo/20250905142013169.jpg',
							modelId: 'mt_1963850866333663232'
						}
					]
				},
				{
					id: 2,
					title: '女篮风姿',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
					status: 'available',
					points: 10,
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051614.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051614.jpg',
							modelId: 'mt_1964199336345157632'
						}
					]
				},
				{
					id: 3,
					title: '胯下运球',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
					status: 'available',
					points: 10,
					category: 'travel',
					gender: 'female',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051613.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051613.jpg',
							modelId: 'mt_1964199375662563328'
						}
					]
				},
				{
					id: 4,
					title: '逐光者',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
					status: 'available',
					points: 10,
					category: 'travel',
					gender: 'female',
					peopleCount: 2,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051611.jpg',
							modelId: 'mt_1964199367148126208'
						}
					]
				},
				{
					id: 5,
					title: '筐贯长虹',
					author: '驴小拍',
					image: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
					status: 'available',
					points: 10,
					category: 'travel',
					gender: 'both',
					peopleCount: 1,
					images: [
						'https://cdn.xryai.cn/picGo/20250906133051610.jpg'
					],
					templateImages: [
						{
							url: 'https://cdn.xryai.cn/picGo/20250906133051610.jpg',
							modelId: 'mt_1964199303944159232'
						}
					]
				}
			]
		}
	},
	async onLoad() {
		// 检测网络状态
		await this.detectNetworkStatus();
	},
	
	onUnload() {
		// 清理网络监听
		uni.offNetworkStatusChange();
	},
	methods: {
		switchFilter(filterKey) {
			this.activeFilter = filterKey;
			// 这里可以添加筛选逻辑
			console.log('切换筛选条件:', filterKey);
		},
		
		// ========== 组件事件处理 ==========
		
		/**
		 * 处理模板选择事件
		 */
		handleTemplateSelected(template) {
			console.log('🎯 选择模板组:', template);
			
			// 验证模板数据
			if (!template || !template.id) {
				console.error('❌ 模板数据无效:', template);
				uni.showToast({
					title: '模板数据异常，请重试',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			
			// 添加触觉反馈
			uni.vibrateShort({
				type: 'light'
			});
			
			try {
				console.log('✅ 开始跳转到AI写真页面，模板数据:', template);
				
				// 保存模板组信息到缓存
				uni.setStorageSync('selectedTemplateGroup', template);
				console.log('💾 模板组已保存到缓存');
				
				// 跳转到个人写真页面
				uni.navigateTo({
					url: '/pages/ai-trip/aiphoto/person_photo/index',
					success: () => {
						console.log('✅ 模板选择跳转成功');
					},
					fail: (err) => {
						console.error('❌ 模板选择跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败，请重试',
							icon: 'error',
							duration: 2000
						});
					}
				});
			} catch (error) {
				console.error('❌ 模板选择跳转过程出错:', error);
				uni.showToast({
					title: '操作失败，请重试',
					icon: 'error',
					duration: 2000
				});
			}
		},
		
		/**
		 * 处理筛选条件变化事件
		 */
		handleFilterChanged() {
			console.log('筛选条件已变化');
			// 可以在这里添加筛选变化后的处理逻辑
		},
		
		// ========== 辅助方法 ==========
		
		/**
		 * 检测网络状态
		 */
		async detectNetworkStatus() {
			try {
				const networkInfo = await uni.getNetworkType();
				this.networkType = networkInfo.networkType;
				this.isWifiConnected = networkInfo.networkType === 'wifi';
				
				console.log(`[图片模板] 当前网络: ${this.networkType}`);
				
				// 监听网络状态变化
				uni.onNetworkStatusChange((res) => {
					this.networkType = res.networkType;
					this.isWifiConnected = res.networkType === 'wifi';
					console.log(`[图片模板] 网络变化: ${res.networkType}`);
				});
				
			} catch (error) {
				console.warn('[图片模板] 网络检测失败:', error);
			}
		}
	}
}
</script>

<style scoped>
.style-template-container {
	width: 100%;
	min-height: 100vh;
	background-color: #1a1a1a;
	color: #ffffff;
}

/* 筛选按钮区域 */
.filter-section {
	padding: 40rpx 60rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.filter-btn {
	background-color: #2a2a2a;
	border-radius: 40rpx;
	padding: 20rpx 32rpx;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
}

.filter-btn.active {
	background-color: #3a3a3a;
	border-color: #4a4a4a;
}

.filter-text {
	font-size: 28rpx;
	color: #ffffff;
	margin-right: 8rpx;
}

.filter-arrow {
	font-size: 20rpx;
	color: #888888;
}


/* 响应式设计 */
@media (max-width: 600rpx) {
	.filter-section {
		padding: 40rpx 30rpx 30rpx;
	}
	
	.filter-btn {
		padding: 16rpx 24rpx;
	}
	
	.filter-text {
		font-size: 26rpx;
	}
}

</style>
